<template>
  <div>
    <div class="search-box">
      <div class="input_search">
        <el-input
          placeholder=" 搜索国家 / 地区 "
          class="input"
          v-model="inputValue"
        >
          <template #suffix>
            <el-icon
              @click="handleSearch(target)"
              class="el-input__icon cursor-pointer"
              ><search
            /></el-icon>
          </template>
        </el-input>
        <!-- <div id="searchIcon" @click="handleSearch(target)">
          <el-icon><search /></el-icon>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
export default {
  name: "handleVisaSearch",
  components: {
    Search,
  },
  setup(props, { emit }) {
    let inputValue = ref("");
    //点击搜索将输入框中的值传递出去
    let handleSearch = () => {
      let searchTarget = inputValue.value;
      if (searchTarget) {
        emit("change-value", searchTarget);
        // console.log(searchTarget);
        // return searchTarget;
      } else {
      }
    };

    onMounted(() => {});
    return {
      handleSearch,
      inputValue,
    };
  },
};
</script>

<style lang="less">
.search-box {
  height: 8vh;
  line-height: 8vh;
  width: 100%;
  background-color: #3385ff;
  .input_search {
    width: 1284px;
    margin: auto;
    .input input {
      height: 4vh;
      border-radius: 10px;
      // font-size: 18px;
    }
    .input span {
      font-size: 18px;
      padding: 0 20px;
      cursor: pointer;
      float: right;
      right: 0;
    }
  }
}
</style>
